import { defineComponent } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import GreyBlock from "@/components/GreyBlock";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { useRequest } from "./request";
import MessageItem from "@/components/Message/item";
import Text from "@/components/Text";
import { Divider } from "vant";
import { getUserTypeValue } from "@/command/apiTool";

export default defineComponent({
  setup(props, {}) {
    const { listOpen, refuse, accept } = useRequest();
    const renderItem = (e: any) => {
      const button: IButtonGroupViewData[] = (
        [
          {
            display: e.partakeFlag == "0",
            text: "拒绝",
            onClick: () => {
              refuse(e.id, "2");
            },
          },
          {
            display: e.partakeFlag == "0",
            text: getUserTypeValue() == "dh" ? "参与" : "接受",
            onClick: () => {
              accept(e.id, "1");
            },
          },
          {
            display: e.partakeFlag == "1",
            childClass: "!bg-[#E9EFFF] !text-[#3B97FF]",
            text: getUserTypeValue() == "dh" ? "已参与" : "已接受",
          },
          {
            display: e.partakeFlag == "2",
            text: "已拒绝",
            childClass: "!bg-[#c7c7c7]",
          },
        ] as IButtonGroupViewData[]
      ).filter((e) => (e.display == undefined ? true : e.display));
      return (
        <div class={"p-[10px]"}>
          <div class={"flex items-center justify-between"}>
            <GreyBlock class="justify-between">
              <MessageItem text={e.title} iconSize={12} showRight={false} />
            </GreyBlock>
            <div>
              <RoundEdgeButtonGroup data={button} />
            </div>
          </div>
          <Text class="mt-[20px]">{e.content}</Text>
          <Divider />
        </div>
      );
    };
    const render1 = () => {
      return (
        <CardView title="" radius={0}>
          {listOpen.value.map((e: any) => {
            return renderItem(e);
          })}
          {/* <ListView
            renderItem={renderItem}
            class={"list-view-border-bottom-color"}
          /> */}
        </CardView>
      );
    };
    return () => (
      <PageTitle title="任务列表" childClass={"m-child-top-10 pt-10"}>
        {render1()}
      </PageTitle>
    );
  },
});
